<template>
  <div class="PersonalIifo">
    <el-card class="box-card">
      <div class="top">
        <div class="img">
          <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        </div>
      </div>
      <div class="text" style="">超级管理员</div>
      <div class="text" style="width: 100%; text-align: center; font-size: 14px">
        部门：项目五组1
      </div>
      <el-button style="width: 100%" @click="Toexit">退出登录</el-button>
      <div style="border-top: 2px solid #eee; margin: 20px -20px 12px -20px"></div>
      <div class="centent">
        <div style="display: flex; line-height: 24px; font-size: 14px">
          <div class="img">
            <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
          </div>
          账号
        </div>
        <div>admin</div>
      </div>
      <div class="centent">
        <div style="display: flex; line-height: 24px; font-size: 14px">
          <div class="img">
            <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
          </div>
          密码
        </div>
        <div style="color: #5094f4">设置</div>
      </div>
      <div class="centent">
        <div style="display: flex; line-height: 24px; font-size: 14px">
          <div class="img">
            <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
          </div>
          微信
        </div>
        <div style="color: #5094f4">未绑定</div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';

const Toexit = () => {
  sessionStorage.removeItem('token')
  localStorage.removeItem('token')
  router.push('/')
}
</script>

<style scoped lang="less">
.PersonalIifo {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 999;
  box-shadow: 0 0 12px #666;
  .box-card {
    width: 300px;
    height: 340px;
    .top {
      width: 120%;
      height: 70px;
      background-color: #dfe1e6;
      margin: -20px 0 36px -20px;
      overflow: hidden;
      .img {
        width: 52px;
        height: 52px;
        position: absolute;
        top: 44px;
        left: 124px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.text {
  width: 100%;
  text-align: center;
  font-size: 14px;
  margin-bottom: 16px;
}
.centent {
  display: flex;
  justify-content: space-between;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 12px;
  // background-color: pink;
  .img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
